<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="markdown.min.js"></script>
	</head>

	<body style="padding:30px;background:#e6e6e6;">
		<div style="width:100%;padding:7px;"><button type="button" align="center" class="btn btn-primary btn-lg" style="font-size:30px;">
  <span class="glyphicon glyphicon-user"></span> 嗨，左边输入markdown语句，右边实时预览
</button></div>
<textarea id="text-input" oninput="this.editer.update()" style="width:50%;height:768px; background:#CBEFD9;font-size:22px;"></textarea>
		<div id="preview" style="float:right;width:50%;height:100%; border:0.5px solid #315;background:#e6e6e6;"></div>
		<script type="text/javascript">
			function Editor(input, preview) {
				this.update = function() {
					preview.innerHTML = markdown.toHTML(input.value);
				};
				input.editer = this
				this.update()
			}

			var $ = function(id) {
				return document.getElementById(id)
			}
			new Editor($("text-input"), $("preview"))
		</script>
	</body>

</html>